<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { require } from '../function/require'
import { useCarStore } from '../stores/shopcar'
import { useLoginStore } from '../stores/login'
export default defineComponent({
  props: ['active'],
  setup(props) {
    const active = ref(props.active)

    let carStore: any = useCarStore()

    let LoginStore = useLoginStore()

    let shopCarlength = ref()

    onMounted(() => {
      if (LoginStore.token) {
        shopCarlength.value = carStore.carList.length
      }
    })

    return { active, shopCarlength }
  }
})
</script>

<template>
  <van-tabbar v-model="active" active-color="#ff7272">
    <van-tabbar-item to="/">
      <span>首页</span>
      <template #icon="props">
        <img
          :src="
            props.active
              ? require('../assets/img01/shouye01.png')
              : require('../assets/img01/shouye.png')
          "
        />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/shop">
      <span>购物车</span>
      <template #icon="props">
        <van-badge :content="shopCarlength" color="#ff6d6d" :show-zero="false">
          <img
            :src="
              props.active
                ? require('../assets/img01/shopcar01.png')
                : require('../assets/img01/shopcar.png')
            "
          />
        </van-badge>
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/my">
      <span>我的</span>
      <template #icon="props">
        <img
          :src="
            props.active ? require('../assets/img01/my01.png') : require('../assets/img01/my.png')
          "
        />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<style scoped lang="scss">
img {
  width: 30px;
  height: 30px;
}

.box ::v-deep .van-tabbar {
  z-index: 999;
}
</style>
